<template>
    <div class="classification">
        <div class="header">
            <span @click="backHome()">
                <van-icon name="arrow-left" />
            </span>
            <input type="text" placeholder="请输入宝贝名称">
            <span>
            </span>
        </div>
        <section>
            <GoodsList @goodsCid=changeCid></GoodsList>
            <GoodsItem :cids="cid"></GoodsItem>
        </section>

    </div>
</template>
<script>
    import GoodsList from "../../components/itemize/GoodsList";
    import GoodsItem from "../../components/itemize/GoodsItem";
    export default {
        name:'classification',
        components:{
            GoodsList,GoodsItem
        },
        data(){
          return{
              cid:""
          }
        },
        methods:{
            changeCid(value){
                // console.log(value)
                this.cid = value
            },
            backHome(){
                history.go(-1)
            }
        }
    }
</script>
<style lang="less" scoped>
    .classification{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #efefef;
        .header{
            width: 100%;
            height: 1rem;
            display: flex;
            background: white;
            border-bottom: 1px solid #efefef;
            span{
                width: 0.8rem;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.4rem;
            }
            input{
                flex: 1;
                height: 0.6rem;
                border: 1px solid #B2B2B2;
                padding-left: 0.2rem;
                box-sizing: border-box;
                margin-top: 0.2rem;
                border-radius: 0.1rem;
            }
        }
        section{
            flex: 1;
            overflow: auto;
            display: flex;
        }
    }
</style>